<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
	<title>行情参考表优化版</title>
	<script type="text/javascript" src="./js/jquery-3.4.1.min.js"></script>
	<script type="text/javascript" src="./js/util.js"></script>
	<script type="text/javascript" src="./js/jsrender.min.js"></script>
	<style type="text/css">
		body {margin: 0px;font-family: 微软雅黑;}
		.refreshClass {margin: 0px;}
		.body {color: #fefefe;}
		.page {
			display: flex; flex-direction: column; justify-content: space-around;
		}
		.head {
			display: flex; flex-direction: row; justify-content:  space-around;
			height: 2.6em;
		}
		.menu {
			display: flex; flex: auto; justify-content: center; align-items: center;
		}
		.menulight { border-bottom: solid .2em blue; }
		.menunormal { border-bottom: solid 1px #dedede; }

		.body {
			width: 100%; height: 400px;
		}
		.bg_deepblue {background-image: linear-gradient(160deg, #b100ff 2%,#008811 25%,#00b3ff 10%); background-size: 100% 100%; background-repeat: no-repeat;}
		.bg_firehot {background-image: linear-gradient(120deg, #ff0000 2%,#008811 25%,#0000ff 10%); background-size: 100% 100%; background-repeat: no-repeat;}
		
		.pricebox {
			/*width: 300px; height: 368px;*/
			position: absolute;
			left: 0px; /*top: 0x;*/
		}
		.cash {
			background-color: blue;
		}
		.qihuo {
			background-color: red;
		}

		.left {float: left;}
		.right {float: right;}
		.title {margin-left: 15px;margin-right: 2px;margin-top: 5px;
			font-size: 1.4em;font-weight: lighter;
		}
		.icon {margin-top: 8px;}
		.icon_color {color: #fff;}

		.clear {clear: both;}

		.full_width {flex: none;}
		.vertical_middle {display: flex; align-items: flex-end;}
		.horizal_right {display: flex; justify-content: flex-end;}
		.title_bar {
			height: 2em; 
			font-size: 1em; font-weight: lighter;
			padding-left: .6em;
		}

		/*开盘价格表*/
		.open_table {
			background-color: #fefefe;
			display: flex; flex-direction: row; justify-content: space-around; flex-wrap: wrap;
			padding: .6em .3em .3em .6em;
		}
		.open_table .open_grid {
			width: 6em; height: 2.3em;
			border-radius: .25em;
			background-color: #5D9CEC;
			display: flex; flex-direction: column; align-items: flex-start;
			flex: auto;
			padding: .3em; margin: 0 .3em .3em 0;
		}
		.open_table .open_grid .coin_name{
			font-weight: normal;
			width: 2em;
		}
		.open_table .open_grid .open_price{
			font-weight: lighter; padding-left: .5em;
		}
		/*涨跌价格*/
		.price_table {
			background-color: #fefefe;
			display: flex; flex-direction: column; justify-content: space-around;
		}
		.price_item {
			display: flex; flex-direction: row;
			margin: 0 0 0 .6em;
			border-bottom: 1px solid #ededed;
		}
		.coin {width: 4.5em; display: flex; align-items: center; color: #0066CC}
		.price {
			margin-left: .6em;
			padding: .4em 0em .4em 0em;
			flex-grow: 1;
			display: flex; flex-flow: row wrap; align-content: space-between;
		}
		.range {
			flex: 1;
			display: flex; flex-direction: row; align-content: space-between;
			padding-left: .3em;
		}
		.upcolor {color: #339900;} .downcolor {color: #EA0000}
		.price_range {
			width: 8em;
			flex: auto;
		}
		.price_range .range{
			display: inline-block;
			width: 3em;
		}
		.price_range .range_price {font-weight: lighter;}

		.grayback {background-color: #f8f8f8;}
	</style>
</head>
<body>
	<div class="page">
		<div class="head">
			<div id="cashmenu" class="menu menulight">
				<span>现货</span>
			</div>
			<div id="qihuomenu" class="menu menunormal">
				<span>合约</span>
			</div>
		</div>
		<div class="body">
			<div id="cashbox" class="pricebox cash">
				<div class="left"><span class="title left">现货USDT价格</span></div>
				<div class="right">
					<span class="title right" id="today_date_1">8月8日</span>
				</div>
				<div class="clear"></div>
				<div class="title_bar full_width vertical_middle">
					<span>今日开盘价格(数据来自火币Global)</span>
				</div>
				<div id="opentable_xianhuo" class="open_table"></div>
				<div class="title_bar full_width vertical_middle">
					<span>涨跌幅价格</span>
				</div>
				<div id="pricetable_xianhuo" class="price_table"></div>
			</div>
			<div id="qihuobox" class="pricebox qihuo">
				<div class="left"><span class="title left">合约USDT价格</span></div>
				<div class="right">
					<span class="title right" id="today_date_2">8月8日</span>
				</div>
				<div class="clear"></div>
				<div class="title_bar full_width vertical_middle">
					<span>今日开盘价格(数据来自火币Global)</span>
				</div>
				<div id="opentable_qihuo" class="open_table"></div>
				<div class="title_bar full_width vertical_middle">
					<span>涨跌幅价格</span>
				</div>
				<div id="pricetable_qihuo" class="price_table"></div>
			</div>
		</div>
	</div>
	<script type="text/x-jsrender" id="openprice_tmpl">
		<div class="open_grid">
			<span class="coin_name">{{upper:name}}</span><span class="open_price">{{:price}}</span>
		</div>
	</script>
	<script type="text/x-jsrender" id="range_price_coin_tmpl">
		<div class="price_item">
			<div class="coin">{{upper:name}}</div>
			<div class="price">
				{{for changePrice}}
				<div class="range {{if #index%2==0}} grayback {{/if}}">
					{{for #data}}
					<div class="price_range  {{if #index==1}} upcolor {{else}} downcolor {{/if}}">
						<span class="range">{{:level}}%</span>
						<span class="range_price">{{:price}}</span>
					</div>
					{{/for}}
				</div>
				{{/for}}
			</div>
		</div>
	</script>
	<script type="text/x-jsrender" id="openprice_qihuo_tmpl">
		<div class="open_grid">
			<span class="coin_name">{{:name}}</span><span class="open_price">{{:price}}</span>
		</div>
	</script>
	<script type="text/x-jsrender" id="range_price_qihuo_tmpl">
		<div class="price_item">
			<div class="coin">{{:name}}</div>
			<div class="price">
				{{for changePrice}}
				<div class="range {{if #index%2==0}} grayback {{/if}}">
					{{for #data}}
					<div class="price_range  {{if #index==1}} upcolor {{else}} downcolor {{/if}}">
						<span class="range">{{:level}}%</span>
						<span class="range_price">{{:price}}</span>
					</div>
					{{/for}}
				</div>
				{{/for}}
			</div>
		</div>
	</script>
	<script type="text/javascript">
		var coin_data = new Array();
		var coinname_arr = ['btc','eth','eos','bch','etc','ltc','xrp','bsv','ada'];
		var range_id_arr = [['+3', '-3'], ['+5', '-5'], ['+7', '-7'], ['+10', '-10']]
		var multinumber = {'+3':1.03, '-3':0.97, '+5':1.05, '-5':0.95, '+7':1.07, '-7':0.93, '+10':1.1, '-10':0.9};
		var precis = {btc:7, eth:5, ltc:3, eos:5, bch:4, etc:5, xrp:4, bsv:7, ada:4}
        var price_api_url = "https://lvwker.top/pricev2.php";
        //模板渲染引擎注册转换函数
        $.views.converters({
            upper: function (val) {
                return val.toUpperCase();//转大写
            }
        })

		$(document).ready(function () {
			var giveWidth = $(".body").width();
			$(".pricebox").width(giveWidth);
			$("#cashbox").css("display", "block");
			$("#qihuobox").css("display", "none");
			$("#cashmenu").click(function(){
				console.log("现货菜单被点击！");
				$("#cashmenu").removeClass("menunormal");
				$("#cashmenu").addClass("menulight");
				$("#cashbox").css("display", "block");
				$("#qihuomenu").removeClass("menulight");
				$("#qihuomenu").addClass("menunormal");
				$("#qihuobox").css("display", "none");
			});

			$("#qihuomenu").click(function(){
				console.log("期货菜单被点击！");
				$("#qihuomenu").removeClass("menunormal");
				$("#qihuomenu").addClass("menulight");
				$("#qihuobox").css("display", "block");
				$("#cashmenu").removeClass("menulight");
				$("#cashmenu").addClass("menunormal");
				$("#cashbox").css("display", "none");

			});

			//日期
			var d = new Date();
			$('#today_date_1').text(formatDate(d, 'MM月dd日'));
			$('#today_date_2').text(formatDate(d, 'MM月dd日'));

			/**数据模型 
			    list = [
			      {name:BTC, changePrice:[
			        [
			          {level:'+3',price:+3val},
			          {level:'-3',price:-3val}
			        ],
			        [
			          {level:'+5',price:+5val},
			          {level:'-5',price:-5val},
			        ]...
			      ]},
			      {name:ETH, prices:[
			        [
			          {level:'+3',price:+3val},
			          {level:'-3',price:-3val}
			        ],
			        [
			          {level:'+5',price:+5val},
			          {level:'-5',price:-5val},
			        ]...
			      ]},
			      ...
			    ]
			     * */

			//现货数据 =======================
			$.get(price_api_url, function(data){
                var json_obj = JSON.parse(data);
				if(json_obj.code==0){ //成功获取数据
				    var priceObj = json_obj.data;
				    var xianhuObj = priceObj['xianhuo'];
				    var qihuObj = priceObj['qihuo'];
				    
        			//现货
        			var newOpenPrices = [];
        			var newRangePrices = [];
				    for (var coinNameIndex in coinname_arr){
				    	var coiName = coinname_arr[coinNameIndex];
				    	var oprice = xianhuObj[coiName];
				    	//整理开盘价
						var oo = {name:coiName, price:oprice};
						newOpenPrices.push(oo);
						//整理涨跌幅价格
						var op = {name:coiName, changePrice:{}};
						var newPriceList = [];

				    	if (oprice) {
				    		for (var rangeKeyIndex in range_id_arr){
				    			var rangeId1 = range_id_arr[rangeKeyIndex];
				    			var newPriceList1 = []
				    			for(var i2 in rangeId1) {
									var rangeId2 = rangeId1[i2];
									var multi = multinumber[rangeId2];//应乘倍数
									var preci = precis[coiName];
									var changePrice = (oprice * multi).toPrecision(preci);
									var op1 = {level:rangeId2, price:changePrice};
									newPriceList1.push(op1);
								}
								newPriceList.push(newPriceList1);
				    		}
				    		op.changePrice = newPriceList;
				    		newRangePrices.push(op);
				    	}
				    }
				    var tpl1 = $.templates("#openprice_tmpl");
				    var htmlOut1 = tpl1.render(newOpenPrices);
				    $("#opentable_xianhuo").html(htmlOut1);
				    var tpl2 = $.templates("#range_price_coin_tmpl");
				    var htmlOut2 = tpl2.render(newRangePrices);
				    $("#pricetable_xianhuo").html(htmlOut2);

				    //合约
				    newOpenPrices = [];
				    newRangePrices = [];
				    for (var index in qihuObj){
				    	var symbolData = qihuObj[index]
				    	var code  = symbolData.code;
				    	var symbolname = code.slice(0,3);
				    	symbolname = symbolname.toLowerCase();
				    	var oprice = symbolData.price;
				    	var oo = {name:code, price:oprice};
				    	newOpenPrices.push(oo);

				    	var op = {name:code, changePrice:{}};
				    	var newPriceList = [];
				    	for (var rkIndex in range_id_arr){
				    		var rangeId1 = range_id_arr[rkIndex];
				    		var newPriceList1 = [];
				    		for (var i2 in rangeId1){
				    			var rangeId2 = rangeId1[i2];
				    			var multi = multinumber[rangeId2];
				    			var preci = precis[symbolname];
				    			if (preci==null){
				    				preci = 5;
				    			}
				    			var changePrice = (oprice * multi).toPrecision(preci);
				    			var op1 = {level:rangeId2, price:changePrice};
				    			newPriceList1.push(op1);
				    		}
				    		newPriceList.push(newPriceList1);
				    	}
				    	op.changePrice = newPriceList;
				    	newRangePrices.push(op);
				    }
				    tpl1 = $.templates("#openprice_qihuo_tmpl");
				    htmlOut1 = tpl1.render(newOpenPrices);
				    $("#opentable_qihuo").html(htmlOut1);
				    tpl2 = $.templates("#range_price_qihuo_tmpl");
				    htmlOut2 = tpl2.render(newRangePrices);
				    $("#pricetable_qihuo").html(htmlOut2);
				}
				$("#cashbox").addClass("bg_deepblue");
				$("#qihuobox").addClass("bg_firehot");
            });
		})
		
	</script>
</body>
</html>